<template>
  <div class="contentView" v-loading="loading" :style="`height:${contentHeight}px`">
    <div class="routeHeader mb-5px">
      <div>
        <el-button @click="close">关闭</el-button>
      </div>
    </div>
    <ContentWrap>
      <el-form class="-mb-5px" :model="queryParam" :inline="true" label-width="110px">
        <el-form-item label="产品编号" prop="productNumber">
          <el-input
            v-model="queryParam.productNumber"
            placeholder="请输入产品编号"
            clearable
            @keyup.enter="handleQuery"
            disabled
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input
            v-model="queryParam.productName"
            placeholder="请输入产品名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
            disabled
          />
        </el-form-item>
        <el-form-item label="部件名称" prop="partName">
          <el-input
            v-model="queryParam.partName"
            placeholder=""
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
            disabled
          />
        </el-form-item>
        <el-form-item label="图纸图号" prop="drawingNumbers">
          <el-input
            v-model="queryParam.drawingNumbers"
            placeholder=""
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
            disabled
          />
        </el-form-item>
      </el-form>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="110px"
      >
        <el-form-item label="物料编号" prop="materialNumber">
          <el-input
            v-model="queryParams.materialNumber"
            placeholder="请输入物料编号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="物料名称" prop="materialName">
          <el-input
            v-model="queryParams.materialName"
            placeholder="请输入物料名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item prop="internalWork">
          <el-checkbox label="内作" v-model="queryParams.internalWork" />
        </el-form-item>
        <el-form-item prop="outsidePurchase">
          <el-checkbox v-model="queryParams.outsidePurchase" label="外购" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <div class="btnWrap">
        <div class="mb-5px">
          <el-button type="primary" @click="handleExport" :loading="exportLoading" v-hasPermi="['order:requirement-manage-Plan:export']"
            >导出数据
          </el-button>
        </div>
        <div> </div>
      </div>
      <el-table v-loading="loading" :data="list" border>
        <el-table-column label="材料类别" align="left" prop="materialType" />
        <el-table-column label="物料编号" align="left" prop="materialNumber" />
        <el-table-column label="物料名称" align="left" prop="materialName" />
        <el-table-column label="材质" align="left" prop="material" />
        <el-table-column label="规格" align="left" prop="specification" />
        <el-table-column label="数量" align="left" prop="quantity" />
        <el-table-column label="单位" align="left" prop="unit" />
        <el-table-column label="下料总重（kg）" align="left" prop="baitingTotalWeight" />
        <el-table-column label="工艺总重（kg）" align="left" prop="processTotalWeight" />
        <el-table-column label="内作" align="left" prop="internalWork" />
        <el-table-column label="外购" align="left" prop="outsidePurchase" />
        <el-table-column label="创建人" align="left" prop="creatorName" />
        <el-table-column label="创建时间" align="left" prop="createTime" width="180">
          <template #default="scope">
            <span>{{ timestampToDateTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
  </div>
</template>

<script setup lang="ts" name="requirementManagePlanDetail">
  import download from '@/utils/download'
  import * as RequirementManagePlanApi from '@/api/orderManagement/requirementManagePlan'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  const message = useMessage() // 消息弹窗
  const route = useRoute()
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const { push } = useRouter()
  const loading = ref(true) // 列表的加载中
  const list = ref([]) // 列表的数据
  const queryParam: any = reactive({
    productNumber: undefined,
    productName: undefined,
    partName: undefined,
    drawingNumbers: undefined
  })
  const queryParams: any = reactive({
    planId: undefined,
    materialNumber: '',
    materialName: '',
    drawingNumber: '',
    internalWork: true,
    outsidePurchase: true
  })
  //时间戳转换
  const timestampToDateTime = (timestamp) => {
    if (timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = ('0' + (date.getMonth() + 1)).slice(-2)
      const day = ('0' + date.getDate()).slice(-2)
      const hours = ('0' + date.getHours()).slice(-2)
      const minutes = ('0' + date.getMinutes()).slice(-2)
      const seconds = ('0' + date.getSeconds()).slice(-2)
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    } else {
      return ''
    }
  }
  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false) // 导出的加载中

  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await RequirementManagePlanApi.getRequirementManagePlan(queryParams)
      queryParam.productNumber = data.productNumber
      queryParam.productName = data.productName
      queryParam.partName = data.partName
      queryParam.drawingNumber = data.drawingNumber
      queryParams.planId = data.id
      list.value = data.childList
    } finally {
      loading.value = false
    }
  }
  //关闭
  const close = () => {
    tagsViewStore.delView(routes.currentRoute.value)
    push('/orderManagement/orderManagement/requirementManagement/requirementManagePlan')
  }
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }


  /** 导出按钮操作 */
  const handleExport = async () => {
    try {
      // 导出的二次确认
      await message.exportConfirm()
      // 发起导出
      let params = {
        id: route.query.id
      }
      exportLoading.value = true
      const data = await RequirementManagePlanApi.exportRequirementManagePlanDetail(params)
      download.excel(data, '订单管理-需求管理-需求计划配置.xls')
    } catch {
    } finally {
      exportLoading.value = false
    }
  }
  const contentHeight = ref(0)
  /** 初始化 **/
  onMounted(async () => {
    queryParam.productNumber = route.query.productNumber
    queryParam.productName = route.query.productName
    queryParam.partName = route.query.partName
    queryParam.drawingNumber = route.query.drawingNumber
    queryParams.planId = route.query.id
    contentHeight.value = document.body.clientHeight - 127
    getList()
  })
</script>
